<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="账号" prop="account">
        <el-input v-model.trim="form.account"></el-input>
      </el-form-item>

      <el-form-item label="名称" prop="username">
        <el-input v-model.trim="form.username"></el-input>
      </el-form-item>

      <el-form-item label="密码" :prop="form.id ? '' : 'password'">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>

      <el-form-item label="监控密码" :prop="form.id ? '' : 'monpwd'">
        <el-input v-model="form.monpwd" type="password"></el-input>
      </el-form-item>

      <el-form-item label="备注" prop="detail">
        <el-input v-model.trim="form.detail"></el-input>
      </el-form-item>

      <el-form-item label="分组" prop="groupid" v-if="!form.id">
        <el-input readonly v-model.trim="form.groupname"></el-input>
      </el-form-item>

      <el-form-item label="权限">
        <tree
          :nodes="authlistTree"
          :setting="setting"
          @onCreated="handleCreated"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { doAdd, doEdit } from '@/api/userManagement'
  import tree from 'vue-giant-tree'
  import { getAuthList } from '@/api/ad'
  export default {
    name: 'UserManagementEdit',
    components: {
      tree,
    },
    data() {
      return {
        ztreeObj: null,
        setting: {
          check: {
            enable: true, //显示复选框
            chkStyle: 'checkbox',
          },
          data: {
            simpleData: {
              enable: true,
              pIdKey: 'pid',
            },
          },
          view: {
            showIcon: true,
            dblClickExpand: true,
            selectedMulti: true, //可以多选
            showLine: true,
          },
          callback: {
            onCheck: function () {},
          },
        },
        authlistTree: [],
        form: {
          account: '',
          username: '',
          password: '',
          monpwd: '',
          detail: '',
          authlist: [],
          groupName: '',
          groupid: '',
        },
        rules: {
          account: [{ required: true, trigger: 'blur', message: '请输入账号' }],
          username: [
            { required: true, trigger: 'blur', message: '请输入名称' },
          ],
          password: [
            { required: true, trigger: 'blur', message: '请输入密码' },
          ],
          monpwd: [
            { required: true, trigger: 'blur', message: '请输入监控密码' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      handleCreated(ztreeObj) {
        this.ztreeObj = ztreeObj
      },
      getAuthListData() {
        getAuthList({}).then((res) => {
          this.authlist = res.data
          this.authlistTree = res.data.map((item, index) => {
            let datac = {}
            if (this.form.authids) {
              if (this.form.authids.indexOf(item.id) > -1) {
                datac.checked = true
              }
            }
            datac.id = item.id
            datac.pid = item.pid
            datac.name = item.title
            datac.open = true
            return datac
          })
        })
      },
      showEdit(row) {
        if (!row.id) {
          this.title = '添加'
        } else {
          this.form.jid = row.id
          this.title = '编辑'
        }
        this.form = Object.assign(this.form, row)
        this.form.password = ''
        this.form.monpwd = ''
        this.getAuthListData()
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        let nodes = this.ztreeObj.getCheckedNodes()
        this.form.authids = nodes
          .map((item) => {
            return item.id
          })
          .join(',')
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if (this.form.id) {
              const res = await doEdit(this.form)
              this.$baseMessage('操作成功!', 'success')
            } else {
              const res = await doAdd(this.form)
              this.$baseMessage('操作成功!', 'success')
            }

            this.close()
            this.$emit('fetch-data')
          } else {
            return false
          }
        })
      },
    },
  }
</script>
